<template>
	<div class="photoinfo-container">
		<h3>{{ photo.title }}</h3>
		<!-- 缩略图区域 -->
		<div class="thumbs">
			<van-image width="120" v-for="(img, i) in imageList" :src="img" :key="i" v-on:click="increase"/>
		</div>
		<p class="subtitle">
			<van-cell title="图片编号" :value="photo.id" />
			<van-cell title="发表时间" :value="addTime" />
			<van-cell title="点击次数" :value="count" />
		</p>
		<hr />
		<!-- 图片内容区域 -->
		<div class="content" v-html="photo.content"></div>
	</div>
</template>

<script>
	import {
		getPhotoDetailById,
		getPhotoSuiteById,
	} from "@/api/photo.js";
    import * as Tools from "@/utils/tools.js";
	export default {
		data() {
			return {
				photo: {}, // 图片详情
				imageList: [], // 缩略图的数组
				count:0,
			};
		},

		created() {
			let id = this.$route.params.id;
			getPhotoDetailById(id).then(result => {
				console.log(result);
				this.photo = result.data[0];
			});
			getPhotoSuiteById(id).then(result => {
				console.log(result);
				// 把数据保存到 imageList 中
				this.imageList = [];
				result.data.forEach(item => {
					this.imageList.push(this.APIDomainName + item.img);
				});
			});
		},
		methods:{
			increase: function() {
				this.count++;
			},
		},
		// 计算属性
		computed: {
			addTime() {
				let date = new Date(this.photo.add_time);
				console.log(date);
				return Tools.dateFormat(date, "yyyy-MM-dd hh-mm-ss");
			}
		},
	};
</script>

<style lang="less">
	.photoinfo-container {
		padding: 8px;

		h3 {
			color: #26a2ff;
			font-size: 15px;
			text-align: center;
			margin: 15px 0;
		}

		.subtitle {
			font-size: 14px;
			padding: 10px, 0px;
		}

		.content {
			font-size: 14px;
			line-height: 30px;
			padding-top: 10px;
		}

		.thumbs {
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;

			img {
				box-shadow: 0 0 8px #999;
			}
		}
	}
</style>
